<%= open_graph_tags title: t(".title"), description: t(".description") %>

<div class="bg-gray-50 max-w-5xl mx-auto pt-12 sm:pt-16">
  <div class="text-center px-4 sm:px-6 lg:px-8">
    <h2 class="sm:flex mx-auto justify-center text-3xl font-extrabold text-gray-900 sm:text-4xl">
      <%= link_to t(".open_startup"), open_startup_root_path, class: "text-gray-500 hover:text-gray-700" %>
      <div class="flex items-center">
        <%= inline_svg_tag "icons/solid/chevron_right.svg", class: "hidden sm:block flex-shrink-0 h-8 w-8 text-gray-400", aria_hidden: true %>
        <span class="w-full"><%= t(".expenses") %></span>
      </div>
    </h2>
    <p class="mt-3 text-xl text-gray-500 sm:mt-4"><%= t(".description") %></p>
  </div>

  <div class="flex flex-col max-w-3xl w-full mx-auto mt-10">
    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  <%= t(".date") %>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  <%= t(".source") %>
                </th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                  <%= t(".amount") %>
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <% @expenses.each do |expense| %>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    <%# i18n-tasks-use t('date.formats.month_year')%>
                    <%= l(expense.occurred_on, format: :month_year) %>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <%= render LinkableTextComponent.new(expense.description, url: expense.url, target: "_blank", class: "underline") %>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-right text-gray-500">
                    <%= number_to_currency(expense.amount, precision: 0) %>
                  </td>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
